import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import './tab.css'

class Tab extends React.Component {
  constructor(props) {
    super(props)
    // 设置状态, 数据
    this.state = {
      c1: 'active',
      c2: 'content'
    }
    // 绑定this
    this.clickEvent = this.clickEvent.bind(this)
  }
  clickEvent(e) {
    console.log(this)
    console.log(e.target)
    let index = e.target.dataset.index
    if (index === '1')
    {
      this.setState({
        c1: 'active',
        c2: 'content'
      })
    } else {
      this.setState({
        c1: 'content',
        c2: 'active'
      })
    }
  }
  render() {
    return (
      <div>
        {/* 注意这里的data-index */}
        <button data-index="1" onClick={this.clickEvent}>内容1</button>
        <button data-index="2" onClick={this.clickEvent}>内容2</button>
        <div className={this.state.c1}>
          <h1>内容1</h1>
        </div>
        <div className={this.state.c2}>
          <h1>内容2</h1>
        </div>
      </div>
    )
  }
}
ReactDOM.render(<Tab/>, document.getElementById('root'))

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
